<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <!-- 1.传递在子组件使用的位置,通过属性绑定的方式 -->
        <!-- <com-a :message="msg"></com-a> -->
        <com-a :bus-mess="msg"></com-a>
    </div>
    <script src='../js/vue.js'></script>
    <script>
        // 2.接收  在子组件定义的位置 通过props属性来接收,props值是一个数组
        Vue.component("com-a", {
            // props: ["message"],
            props: ["BusMess"],

            // template: `<div>我是子组件1---{{message}}</div> `,
            template: `<div>我是子组件2---{{BusMess}}</div> `
        })


        // 组件与组件之间的数据是不能直接共享的
        const vm = new Vue({
            el: '#app',
            data: {
                msg: '所有的顺其自然,都是无能为力'
            },
            methods: {},
        })
    </script>
</body>

</html>